<template>
	<view class="page">
		<navigation :titleColor="titleColor" style="z-index: 9999999999;" class="header_navigation" barColor="#333333" textColor="#333333" defaultButton="back">
			养老院展示
		</navigation>
		<scroll-view scroll-y="true" class="page_scroll" scroll-with-animation="true" enable-back-to-top="true" @scroll="pageScroll" @scrolltolower="scrollBottom">
			<view class="header">
				<swiper
					class="header_swiper"
					:current="swiperCurrent"
					@change="changeSwiper"
					:indicator-dots="false"
					:autoplay="true"
					:interval="3000"
					:duration="1000"
					:circular="true"
				>
					<swiper-item v-for="(item, index) in images" :key="index">
						<view class="swiper-item"><image class="image" :src="item" mode=""></image></view>
					</swiper-item>
				</swiper>
				<view class="dots" v-if="images && images.length > 1">
					<block v-for="(item, index) in images.length" :key="item"><view class="dot" :class="index == swiperCurrent ? ' active' : ''"></view></block>
				</view>
			</view>
			<view class="page_title">--&nbsp;&nbsp;养老院列表&nbsp;&nbsp;--</view>
			<view class="card_panel">
				<view class="card_item" v-for="(item, index) in dataList" :key="index" @tap="nursingHomeDetail(item)">
					<image class="card_image" :src="item.beadHouseImage" mode=""></image>
					<view class="card_text">{{ item.beadHouseName }}</view>
				</view>
			</view>
			<view class="no-data">
				<view class="more"><uni-load-more :status="moreStatus" :content-text="moreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import * as modelApi from '@/api/userApi/model.js'
import { uniLoadMore } from '@dcloudio/uni-ui';
export default {
	data() {
		return {
			titleColor: 'rgba(255,255,255,0)',
			swiperCurrent: 0,
			images: [],
			dataList: [],
			// more
			moreStatus: 'more',
			moreContentText: {
				// 加载各状态文字说明。
				contentdown: '加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			},
			searchModel: {
				search: null,
				current: 1,
				size: 10
			}
		};
	},
	onShow() {
		this.getList();
	},
	methods: {
		getList() {
			this.moreStatus = 'loading';
			modelApi
				.queryBasic(this.searchModel)
				.then(res => {
					if (res.code === 0) {
						if (this.searchModel.current == 1) {
							this.dataList = [];
						}
						if (res.data && res.data.length == 10) {
							this.moreStatus = 'more';
							this.searchModel.current += 1;
							this.dataList = [...this.dataList, ...res.data];
						} else if (res.data && res.data.length < 10) {
							this.moreStatus = 'noMore';
							this.searchModel.current += 1;
							this.dataList = [...this.dataList, ...res.data];
						} else {
							this.moreStatus = 'noMore';
						}
						this.images = [
							"https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/news.jpg",
							"https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/news.jpg"
						];
					}
				})
				.catch(e => {
					this.moreStatus = 'noMore';
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		},
		// 滑动到底部。分页处理
		scrollBottom() {
			this.getList();
		}, 
		changeSwiper(e) {
			this.swiperCurrent = e.detail.current;
		},
		nursingHomeDetail(item) {
			uni.navigateTo({
				url: `/pages/index/nursingHome/nursingHomeDetail/nursingHomeDetail?id=${item.beadHouseId}`
			});
		},
		pageScroll(event) {
			let scrollTop = parseInt(event.detail.scrollTop);
			let matrixingColor = (scrollTop-20) / 100;
			this.pageScrollStyle(matrixingColor);
		},
		pageScrollStyle(matrixing) {
			this.titleColor = 'rgba(255,255,255,' + matrixing + ')';
		}
	}
}
</script>

<style lang="stylus">
.page_scroll
	position absolute
	top 0rpx
	right 0rpx
	bottom 0rpx
	left 0rpx
.header_navigation
	position absolute
	top 0rpx
	z-index 9
.header
	width 100%
	position relative
	.header_swiper
		width 100%
		height 510rpx
		.swiper-item, .image
			width 100%
			height 100%
	.dots
		position absolute
		bottom 10rpx
		left 50%
		// 这里一定要注意兼容不然很可能踩坑
		transform translate(-50%, 0)
		-webkit-transform translate(-50%, 0)
		z-index 9
		display flex
		flex-direction row
		justify-content center
		.dot
			width 28rpx
			height 8rpx
			background rgba(196, 196, 196, 1)
			border-radius 4rpx
			margin-right 20rpx
		.active
			background rgba(255, 66, 0, 1)
.page_title
	text-align center
	font-size 32rpx
	font-family PingFang SC
	font-weight 400
	color #FF7D21
	line-height 100rpx
.card_panel
	width 100%
	display flex
	flex-wrap wrap
	padding 0rpx 10rpx 0rpx 30rpx
	box-sizing border-box
	.card_item
		width 50%
		padding-right 20rpx
		padding-bottom 40rpx
		box-sizing border-box
		.card_image
			width 100%
			height 232rpx
			border-radius 12rpx
		.card_text
			margin-top 15rpx
			font-size 28rpx
			font-family PingFang SC
			font-weight 400
			color #333333
			box-sizing border-box
</style>
